<template>
	<view>
		<cover-view class="bottomView">
			<cover-view class="flex-row-space-between">
				<cover-view class="">
					<cover-view class="type1Title">
						订单已完成
					</cover-view>
					<cover-view class="type1Title1">
						司机已将您安全送达
					</cover-view>
				</cover-view>
				<cover-image v-if='type==1' class="image8" src="/static/index/8.png" mode=""></cover-image>
			</cover-view>
			<cover-view class="flex-row-space-between" style="margin-top: 30rpx;">
				<cover-view class="flex-row-flex-start flex1">
					<cover-view class="circle1 ">

					</cover-view>
					<cover-view class="type1Title2 ">
						{{data.start_address}}
					</cover-view>
				</cover-view>
				<cover-view v-if='type==1' class="type1Title3">
					<!-- 0:13 -->
				</cover-view>
			</cover-view>
			<cover-view class="flex-row-space-between" style="margin-top: 30rpx;">
				<cover-view class="flex-row-flex-start flex1">
					<cover-view class="circle ">

					</cover-view>
					<cover-view class="type1Title2 ">
						{{data.end_address}}
					</cover-view>
				</cover-view>
				<cover-view v-if='type==1' class="type1Title4">
					<!-- 累计用时 -->
				</cover-view>
			</cover-view>



		</cover-view>
		<cover-view class="bottomView">
			<cover-view class="flex-row-space-between">
				<cover-view class="flex-row-flex-start">
					<cover-image class="headImage" :src="data.driver.avatar" mode=""></cover-image>
					<cover-view class="">
						<cover-view class="type3Name">
							{{data.driver.nick_name}}
						</cover-view>
						<cover-view class="type3No">
							编号{{data.driver.id}}
						</cover-view>
					</cover-view>
				</cover-view>
				<image @click="phoneClick(data.driver.mobile)" class="phone" src="/static/common/phone.png" mode="">
				</image>
			</cover-view>
			<cover-view class="flex-row-space-between" style="margin: 0  30rpx;">
				<cover-view v-for="(item,index) in operationList" :key="index">
					<cover-view @click="operationClick(item)" class="flex-column-center">
						<image class="type3Icon" :src="item.icon" mode=""></image>
						<cover-view class="type3Title">
							{{item.name}}
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>

		</cover-view>
		<view class="bottomView">
			<view class="flex-row-space-between">
				<view class="title">
					行程费用
				</view>
				<view class="flex-row-flex-end">
					<view class="title">
						{{data.total_amount}}元
					</view>
				</view>
			</view>
			<view @click="descriptionClick()" class="flex-row-center" style="margin-top: 70rpx ;">
				<view>
					<text class='money1'>{{data.total_amount}}</text>

					<text class='money2'>元</text>
				</view>
			</view>
			<view class="flex-row-center">
				<view class="money">
					费用说明
				</view>
				<image class="image3" src="/static/index/3.png" mode=""></image>
			</view>
			<view v-for="(item,index) in payList" :key="index">
				<view @click="itemClick(index)" class="item flex-row-space-between">
					<view class="flex-row-flex-start">
						<image class="icon" :src="item.icon" mode=""></image>
						<view class="name">
							{{item.name}}
						</view>
					</view>
					<image class="xz" v-if="payIndex==index" src="/static/common/xz.png" mode=""></image>
					<image v-else src="/static/common/wxz.png" mode=""></image>
				</view>
			</view>

		</view>
		<view @click='payButtonClick()' class="payButton flex-row-center">
			确认支付{{data.total_amount}}元

		</view>
	</view>
</template>

<script>
	import {
		pay,
		getWxOpenid
	} from '@/api/index.js'
	import {
		getOrderDetail,
	} from '@/api/personalCenter.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				payIndex: 0,
				payList: [
					// 	{
					// 		name:'余额',
					// 		icon:'/static/search/wx.png',
					// 		type:'balance'

					// 	},
					{
						name: '微信',
						icon: '/static/common/wx.png',
						type: 'wechat'

					},
					// 	{
					// 		name:'支付宝',
					// 		icon:'/static/personalCenter/zfb.png',
					// 		type:'alipay'

					// 	}
				],
				operationList: [{
						icon: '/static/index/11.png',
						name: '紧急求助',
						url: 'order'
					},
					{
						icon: '/static/index/12.png',
						name: '联系客服',
						value: '400-123-123',
					},
					{
						icon: '/static/index/13.png',
						name: '取消订单',
						url: 'info?type=1'
					},



				],
				data: {},
				order_id: 0,

			}
		},
		onShow() {

		},
		onLoad(e) {
			// #ifdef MP
			this.getOpenId()
			// #endif 
			if (e.order_id) {
				this.order_id = e.order_id

				this.getOrderDetail()
			}
		},

		methods: {
			getOpenId() {
				var url = getWxOpenid

				var provider = 'weixin'
				// #ifdef MP-ALIPAY
				provider = 'alipay'
				url = authAliaAuth
				// #endif 
				// uni登录
				uni.login({
					provider: provider,
					success: loginRes => {
						console.log(loginRes)
						let code = loginRes.code // 获取开发code
						url({
								code: code,

							})
							.then(res => {


							})
					}

				})
			},
			weixin(option1) {
				console.log(option1)

				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: option1.timeStamp,
					nonceStr: option1.nonceStr,
					package: option1.package,
					signType: option1.signType,
					paySign: option1.paySign,
					success: success => {
						console.log(success)
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000,
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)


					},
					fail: error => {
						console.log(error)
						if (error.errMsg == 'requestPayment:fail cancel') {
							uni.showToast({
								title: '已取消支付',
								icon: 'none',
								duration: 5000
							})
						} else {
							uni.showToast({
								title: error || error.msg,
								icon: 'none',
								duration: 5000
							})
						}

					},
				})
			},
			payButtonClick() {
				var that = this
				var data = {
					pay_method: 'online',
					pay_platform: 'wechat',
					order_id: this.order_id
				}
				pay(data)
					.then(res => {
						that.weixin(res.data)
						// this.showToast(res.msg)
						//     setTimeout(() => {
						//          uni.navigateBack()
						//                 }, 2000)
					})
			},
			getOrderDetail() {
				var that = this
				var data = {
					order_id: this.order_id
				}
				getOrderDetail(data)
					.then(res => {
						that.data = res.data
					})
			},
			descriptionClick() {
				uni.navigateTo({
					url: 'description'
				})
			},
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {

		background: #F5F6F7;
	}

	.bottomView {
		margin: 30rpx 38rpx;
		margin-bottom: 0;
		padding: 30rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 16rpx;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.image1 {
		margin-right: 6rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.num {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #3D3D3D;
	}

	.image2 {
		margin-left: 6rpx;
		width: 12rpx;
		height: 12rpx;
	}

	.money {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.image3 {
		margin-left: 6rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.button {
		width: 300rpx;
		height: 76rpx;
		border-radius: 38rpx;
		opacity: 1;
		border: 2rpx solid $base-color;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		// font-weight: 500;
		color: $base-color;
	}

	.button1 {
		width: 300rpx;
		height: 76rpx;
		background: $base-color;
		border-radius: 38rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		// font-weight: 500;
		color: #FFFFFF;
	}

	.dingwei {
		margin-right: 30rpx;
		width: 76rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 50%;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		opacity: 1;
	}

	.image7 {
		width: 36rpx;
		height: 36rpx;
	}


	.type1Title {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.type1Title1 {
		margin-top: 6rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.image8 {
		width: 48rpx;
		height: 48rpx;
		animation: rotate 2s infinite linear;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.circle {
		margin-right: 10rpx;
		width: 16rpx;
		height: 16rpx;
		background: #FF9500;
		opacity: 1;
		border-radius: 50%;
	}

	.circle1 {
		margin-right: 10rpx;
		width: 16rpx;
		height: 16rpx;
		background: $base-color;
		opacity: 1;
		border-radius: 50%;
	}

	.type1Title2 {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}

	.type1Title3 {
		text-align: end;
		width: 120rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: $base-color;
	}

	.type1Title4 {
		text-align: end;
		width: 120rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.type1Button {
		margin: 60rpx 0;
		margin-bottom: 0;
		height: 90rpx;
		border-radius: 45rpx;
		opacity: 1;
		border: 2rpx solid #EEEEEE;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.type2Button {
		margin: 60rpx 0;
		margin-bottom: 0;
		height: 90rpx;
		border-radius: 45rpx;
		opacity: 1;
		background: $base-color;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.headImage {
		margin-right: 10rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.type3Name {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.type3No {
		margin-top: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.type3Icon {
		margin-top: 50rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.type3Title {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D3D3D;
	}

	.type4Button {
		margin: 30rpx;
		margin-bottom: 0;
		height: 90rpx;
		background: #26D360;
		border-radius: 45rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.item {
		margin-top: 40rpx // margin: 40rpx 56rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
	}

	.name {
		margin-left: 12rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.xz {
		width: 36rpx;
		height: 36rpx;
	}

	.payButton {
		margin: 110rpx 30rpx;
		height: 90rpx;

		background: #303133;
		border-radius: 45rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.money1 {
		font-size: 56rpx;
		font-family: DIN-Bold, DIN;
		font-weight: 700;
		color: #333333;
	}

	.money2 {
		font-size: 16rpx;
		font-family: DIN-Bold, DIN;
		font-weight: 400;
		color: #333333;
	}
</style>